<template>
  <div>
<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>增加商品</span>
  </div>
  <div>
    <el-form ref="itemAdd"  :rules="rules" :model="item" label-width="150px">
      <el-form-item label="商品名称" prop="name">
    <el-input style="width:300px" v-model="item.name"></el-input>
  </el-form-item>
    <!-- 价格 -->
<el-form-item label="商品价格" prop="price">
    <el-input style="width:300px" v-model="item.price"></el-input>
  </el-form-item>
  <!-- 父级分类 -->
  <el-form-item label="选择商品分类" prop="cartId">
    <el-select v-model="item.cartId" placeholder="女装26">
      <el-option label="请选择" :value="0"></el-option>
      <el-option
        v-for="item in cates"
        :key="item.id"
        :label="item.cateName"
        :value="item.id"></el-option>
    </el-select>
  </el-form-item>
  <!-- -----------------------------上传图标------------------------- -->
  <el-form-item label="上传商品图标">
<el-upload
  ref="upload"
  class="upload-demo"
  action="/api/upload"
  name="file"
  accept=".png, .jpg, .jpeg, .dox, .html"
  :headers="{token:32123}"
  :data="{ a:10, b:20 }"
  list-type="picture"
  :auto-upload="false"
  :before-upload="beforeUpload"
  :on-success="uploadSuccess"
  >
  <el-button size="small" type="primary">选取文件</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
  <el-button size="small" @click="uploadSubmit" type="success">点击上传</el-button>
  </el-form-item>
  <!-- -----------------------------上传图标------------------------- -->
  <el-form-item label="排序" prop="sort">
     <el-input-number v-model="item.sort" :min="1" :max="2" label="描述文字"></el-input-number>
  </el-form-item>
   <el-form-item label="状态" prop="enAbled">
    <el-switch v-model="item.enAbled"></el-switch>
  </el-form-item>
  <!-- 文本域 -->
  <el-form-item label="描述" prop="desc">
    <el-input style="width:300px" v-model="item.desc">
    </el-input>
  </el-form-item>
  <!-- -----------------------------富文本--------------------------------------- -->
   <el-form-item label="商品详情" prop="content">
    <template>
  <!-- bidirectional data binding（双向数据绑定） -->
  <div class="content-container">
     <quill-editor v-model="item.content"
                ref="myQuillEditor"
                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @ready="onEditorReady($event)">
  </quill-editor>
  </div>
</template>
  </el-form-item>
  <div>
    <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button @click="resetForm('item')">重置</el-button>
  </el-form-item>
  </div>
</el-form>
  </div>
  </el-card>
  </div>
</template>

<script>
import { fecthCateLists, cartItens } from '_api'
import { Quill } from 'vue-quill-editor'
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'

Quill.register('modules/ImageExtend', ImageExtend)
export default {
  name: 'ItemAdd',
  data () {
    return {
      item: {
        name: '',
        price: 0,
        cpFl: '',
        cartId: 0,
        desc: '',
        sale: 0,
        sort: 0,
        onSale: true,
        img: '',
        content: ''
      },
      cates: [], // 代表所有分类
      editorOption: {
        scrollingContainer: 'content-container',
        modules: {
          ImageExtend: {
            loading: true,
            name: 'upload',
            action: '/api/upload',
            response: (res) => {
              return res.data.url // 这里需要接口返回的图片地址
            }
          },
          toolbar: {
            container: container,
            handlers: {
              image: function () {
                QuillWatch.emit(this.quill.id)
              }
            }
          }
        }
      },
      rules: {
        name: [
        // 必填验证
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        price: [
        // 必填验证
          { required: true, message: '价格必填', trigger: 'blur' },
          { min: 2, max: 8, message: '价格必须在 2 到 8 个数字', trigger: 'blur' }
        ],
        sort: [
        // 必填验证
          { required: true }
        ],
        pid: [
        // 必填验证
          { required: true }
        ],
        enAbled: [
        // 必填验证
          { required: true, trigger: 'blur', message: '必须选择状态' }
        ],
        desc: [
        // 必填验证
          { required: true, trigger: 'blur', message: '描述必须填' }
        ]
      }
    }
  },
  methods: {
    onSubmit () {
      this.fecthCates()

      this.$refs.itemAdd.validate(valid => {
        if (valid) {
          // 验证通过
          cartItens(this.item).then(res => {
            this.$message({
              showClose: true,
              message: '大吉大利！商品修改成功❤',
              type: 'success'
            })
            this.$router.push('/cartLists')
          })
        } else {
        // 不通过
          return false
        }
      })
    },
    fecthCates () {
      // 请求所有商品分类
      fecthCateLists().then(res => {
        if (res.data.code === 200) {
          this.cates = res.data.data.list
        }
      })
    },
    uploadSuccess (res) {
      if (res.code === 200) {
        this.item.img = res.data.url
        this.$message({
          showClose: true,
          message: '贺喜贺喜！上传图片成功❤',
          type: 'success'
        })
      }
    },
    // 点击上传文件
    uploadSubmit () {
      this.$refs.upload.submit()
    },
    // 上传之前前行判断
    beforeUpload (file) {
      if (file.size > (1000 * 1024)) {
        this.$message.error('上传的文件太大啦')
        return false
      } else {
        return true
      }
    }
  },
  created () {
    this.fecthCates()
  }
}
</script>

<style lang="scss" scoped>
.quill-editor{
  height: 500px;
}
.content-container{
height: 500px;
overflow-y: auto;
border: 1px solid palevioletred;
}
</style>
